<template>
  <div>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  /* 
    在挂载(把虚拟DOM转为真实DOM并渲染在浏览器中)之前的生命周期函数:
      在这个阶段,浏览器中展示的还是容器中没有经过Vue编译的DOM结构,这DOM结构和Vue没有任何的关系
      (在脚手架中的index.html的容器app中添加一些文字即可看见效果)
      在这个阶段所有操作DOM都不生效,因为我们在vue中操作的是Vue生成的DOM,而不是模板中的DOM,模板中的DOM迟早要被替换掉
  */
  beforeMount() {
    debugger;
  },

  /* 
    在这个阶段之前,Vue根据虚拟DOM创建好了真实DOM,并且直接替换了el容器
    Mounted阶段执行的时候,浏览器中展示的已经是Vue生成的DOM了
    一般来说在这个阶段,我们会做所有的初始化操作(开启定时器,发送初始化请求,发起订阅,绑定自定义事件等等...)
  */
  Mounted() {
    debugger;
  },
};
</script>

<style>
</style>